<template>
  <div class="order">
      <my-header>
          <template #left>
             <van-icon name="arrow-left" @click="$router.back()"/>
          </template>
          <template #center>
             确认订单
          </template>
      </my-header>
      <div class="adress van-contact-card">
         <van-icon name="location-o" />
         <section>
             <p>{{address.linkMan}}{{address.mobile}}</p>
             <p class="ad-foot">{{address.address}}</p>
         </section>
         <van-icon name="arrow" />
      </div>
      <div class="goods">商品列表</div>
      <ul>
          <li v-for="(item,index) in orderList">
              <img :src="item.img" alt="">
              <section>
                  <p>
                      <span>{{item.name}}</span>
                      <span>￥{{item.price}}</span>
                  </p>
                  <p style="color:#999">
                      <span>{{item.ties}}</span>
                      <span>X{{item.buyNum}}</span>
                  </p>
              </section>
          </li>
      </ul>
      <div class="sendFtn">
          <span>配送方式</span>
          <span>快递</span>
      </div>
       <van-field v-model="remark" label="备注" placeholder="请输入备注" />
       <div class="sendFtn">
          <span>商品金额</span>
          <span>￥{{allPrice}}</span>
      </div>
      <van-submit-bar :price="allPrice*100" button-text="提交订单" @submit="$router.push('/payment')" />

  </div>
</template>

<script>
import { ref, reactive, toRefs,computed } from "vue";
import myHeader from '../../components/myHeader.vue';
import { getAddrerss } from '../../api/secendPage/index';
import { useStore } from 'vuex';
export default {
  components: { myHeader },
  setup() {
    const { state,getters } = useStore();
    //  const store = useStore();
    //  console.log(getters);


    // [{"goodsId":99763,"logisticsType":0,"number":1,"propertyChildIds":"5351:17887,8782:35182,","checked":true}
    
    // ]
    const data = reactive({
      address: {},
      orderList: computed(() => state.cartList.filter(item => item.order)),
      remark: '',
      allPrice: computed(() => getters.allPrice)
    })
    getAddrerss({token:localStorage.getItem('token')}).then(res => {
       data.address = res.data;
    })
   
    return{
      ...toRefs(data)
    }
  },
};
</script>
<style lang="scss" scoped>
.order{
  height: 100%;
  background: #e9e9e9;
  .adress{
    background: #fff;
    display: flex;
    align-items: center;
    padding: 10px 30px;
    box-sizing: border-box;
    font-size: 14px;
    position: relative;
    section{
      flex: 1;
      padding: 0 20px;
    }
    .van-icon{
      color:#dbdadf;
      font-size: 18px;
    }
    .ad-foot{
      margin-top: 20px;
      color: grey;
    }
  }
  .goods{
    margin-top: 15px;
    background: #fff;
    height: 40px;
    font-size: 14px;
    padding-left: 20px;
    line-height: 40px;
  }
  li{
    background: #fff;
    padding: 10px;
    font-size: 13px;
    display: flex;
    border-bottom: 1px solid #e8e8e8;
    img{
      width: 80px;
      height: 80px;
    }
    section{
      flex: 1;
      margin-left: 10px;
      display: inline-flex;
      align-content: space-between;
      flex-wrap: wrap;
      padding: 10px 0;
      p{
          width: 100%;
          display: flex;
          justify-content: space-between;
      }
    }
  }
  .sendFtn{
    background: #fff;
    margin-top: 15px;
    display: flex;
    height: 40px;
    font-size: 14px;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
  }
}
</style>